<template>
    <div class="chat">
        <div class="chat-list" :style="{height: layout.topStyl.height+'px'}">
            <div class="chat-resource flex-row">
                <p>搜索引擎<span class="re-content">发顺丰三</span></p>
                <p>关键词<span class="re-content">公司的风格大方</span></p>
                <p>来源<span class="re-content">公司的分公司地方</span></p>
                <p class="flex-item chat-page">对话页面<a class="re-content" href="javascript:;" target="_blank">https://www.onlineservice-hk.com/k800/chatClient/chatbox.jsp?companyID=210&s=1</a></p>
            </div>
            <div class="chat-box">
                <ChatList></ChatList>
            </div>
            <div class="chat-watching">
                <input type="text" readonly >
            </div>
        </div>
        <div class="chat-input flex-column" :style="{ height:layout.bottomStyl.height+'px'}">
            <div class="space-bar-top-bottom spacebar" @mousedown.stop.prevent="handleDown('rightVertical',$event)">
                <div class="inner-bar">
                    <span class="rect"></span>
                    <span class="rect"></span>
                    <span class="rect"></span>
                    <span class="rect"></span>
                    <span class="rect"></span>
                    <span class="rect"></span>
                    <span class="rect"></span>
                    <span class="rect"></span>
                    <span class="rect"></span>
                </div>
            </div>
            <div class="chat-tools">
                <a href="javascript:;" class="tools-btn" title="字体">
                    <Icon type="social-angular-outline" size='18'></Icon>
                </a>
                <a href="javascript:;" class="tools-btn" title="传送文件">
                    <Icon class="tool-icon" type="ios-folder-outline" size='18'></Icon>
                </a>
                <a href="javascript:;" class="tools-btn" title="实时查看">
                    <Icon class="tool-icon" type="ios-search" size='18'></Icon>
                </a>
                <a href="javascript:;" class="tools-btn" title="表情">
                    <Icon class="tool-icon" type="android-happy" size='18'></Icon>
                </a>
                <a href="javascript:;" class="tools-btn" title="截图">
                    <Icon class="tool-icon" type="android-expand" size='18'></Icon>
                </a>
                <a href="javascript:;" class="tools-btn" title="推送信息收集表">
                    <Icon class="tool-icon" type="android-document" size='18'></Icon>
                </a>
                <a href="javascript:;" class="tools-btn" title="推送满意度调查">
                    <Icon class="tool-icon" type="android-list" size='18'></Icon>
                </a>
                <a href="javascript:;" class="tools-btn" title="立即评估">
                    <Icon class="tool-icon" type="android-contact" size='18'></Icon>
                </a>
            </div>
            <div class="layout-2 flex-item flex-row">
                <pre class="flex-item"
                    placeholder="请输入你想要说的话"
                    contentEditable="true" spellcheck="false" ref="inputbox" @paste="clipboardData" @keydown="editAreaKeydown"
                    @keyup="editAreaKeyUp" @click.stop.prevent="editAreaKeyUp('click',$event)" v-html="inputBoxInnerHTML"></pre>
                <div class="send flex-row flex-row-center align-items">
                    <Button class="send-btn" @click="sendMsg">发送</Button>
                    <Dropdown trigger="click" class="list-box" @on-click="selectItem">
                        <Button class="send-setting"><Icon type="arrow-down-b"></Icon></Button>
                        <DropdownMenu slot="list" class="list">
                            <DropdownItem class="item" name="s1">
                                <div class="left-point">
                                    <a href="javascript:;" class="point" v-show="this.sendModel == '131'"></a>
                                </div>
                                <div class="right">Ctrl+Enter发送(C)</div>
                            </DropdownItem>
                            <DropdownItem class="item" name="s2">
                                <div class="left-point">
                                    <a href="javascript:;" class="point" v-show="this.sendModel == '13'"></a>
                                </div>
                                <div class="right">Enter发送(E)</div>
                            </DropdownItem>
                            <DropdownItem class="item" name="s3">
                                <div class="left-point">
                                    <a href="javascript:;" class="select"><Icon type="checkmark" v-if="isAutoNextDialog"></Icon></a>
                                </div>
                                <div class="right">发送后切换到下一对话(Y)</div>
                            </DropdownItem>
                            <DropdownItem class="item" name="s4">
                                <div class="left-point"></div>
                                <div class="right">其他快捷键设置(Z)</div>
                            </DropdownItem>
                        </DropdownMenu>
                    </Dropdown>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import ImageCompressor from '@/utils/image-compressor.esm'
import ChatList from '@/pages/index/comp/chatList'
export default {
    components:{
        ChatList
    },
    data () {
        return {
            rangeInfo:{
                range: null,//光标对象
                self: null
            },
            inputBoxInnerHTML:'',
            isAutoNextDialog:false,
            sendModel:'131',
            expressionList: {
                baseUrl: 'http://192.168.35.91:8090/face/',
                list: [...Array(75).keys()]
            }
        }
    },
    methods: {
        clipboardData (e) {
            let cbd = e.clipboardData;
            let ua = window.navigator.userAgent;
            // 如果是 Safari 直接 return
            if (!(e.clipboardData && e.clipboardData.items)) {
            return;
            }
            // Mac平台下Chrome49版本以下 复制Finder中的文件的Bug Hack掉
            if (cbd.items && cbd.items.length === 2 && cbd.items[0].kind === "string" && cbd.items[1].kind === "file" &&
            cbd.types && cbd.types.length === 2 && cbd.types[0] === "text/plain" && cbd.types[1] === "Files" &&
            ua.match(/Macintosh/i) && Number(ua.match(/Chrome\/(\d{2})/i)[1]) < 49) {
                return;
            }
            let copyContent = cbd.items[0];
            if (copyContent.kind == 'file') {
            let blob = copyContent.getAsFile();
            if (blob.size === 0) {
                return;
            }
            if (blob.type == 'image/png' || blob.type == 'image/jpeg' || blob.type == 'image/gif') {
                new ImageCompressor(blob, {
                success: (res) => {
                    this.getObjectURL(res);  //从Blob获取图片的地址
                    this.pasteHtmlAtCaret('<img src="' + this.getObjectURL(blob) + '"/>')
                },
                error(e) {
                    console.log(e);
                },
                });
            }
            }

        },
        editAreaKeydown () {

        },
        editAreaKeyUp (event) {
            //发送消息
            var e = event || window.event || arguments.callee.caller.arguments[0]; 
            if(this.sendModel == '13' && e.keyCode == '13'){
                this.sendMsg();
            }else if(e.ctrlKey && e.keyCode  == '13'){
                this.sendMsg();
            }
            if (window.getSelection) {
                let selection = window.getSelection(), range;
                if (selection.getRangeAt && selection.rangeCount) {
                    range = selection.getRangeAt(0);
                    //range.deleteContents();   //删除选中内容
                }
                this.rangeInfo = {
                    selection,
                    range,
                }
            }
        },
        sendMsg () {
            this.$Message.info('发送消息啦');
            
            // this.$socket.emit('userMsg',{

            // }, res=> {

            // });
        },
        changeSendModel () {

        },
        pasteHtmlAtCaret (html) {//粘贴处理
            if (this.rangeInfo.self === null) {
                this.$refs.inputbox.focus();
                this.editAreaKeyUp();
            }
            let el = document.createElement("div");
            el.innerHTML = html;
            let frag = document.createDocumentFragment(), node, lastNode;
            while ((node = el.firstChild)) {
              lastNode = frag.appendChild(node);
            }
            this.rangeInfo.range.deleteContents();  //删除选中内容
            this.rangeInfo.range.insertNode(frag);  //插入内容
            // Preserve the selection
            if (lastNode) {
                this.rangeInfo.range = this.rangeInfo.range.cloneRange();
                this.rangeInfo.range.setStartAfter(lastNode);
                this.rangeInfo.range.collapse(true);
                this.rangeInfo.selection.removeAllRanges();
                this.rangeInfo.selection.addRange(this.rangeInfo.range);
            }
            
        },
        getObjectURL(file) {//获取图片base64
            let url = null;
            if (window.createObjectURL != undefined) { // basic
                url = window.createObjectURL(file);
            } else if (window.URL != undefined) { // mozilla(firefox)
                url = window.URL.createObjectURL(file);
            } else if (window.webkitURL != undefined) { // webkit or chrome
                url = window.webkitURL.createObjectURL(file);
            }
            return url;
        },
        asend () {
            this.$Message.success('aa');
        },
        bsend () {
            this.$Message.success('bb');
        },
        selectItem (type) {
            switch(type) {
                case 's1': {//按ctrl+enter发送
                    this.sendModel = '131';
                    break;
                }
                case 's2': {//按enter发送
                    this.sendModel = '13';
                    break;
                }
                case 's3': {//切换会话是否开启
                    this.isAutoNextDialog = !this.isAutoNextDialog;
                    break;
                }
                case 's4': {//唤起快捷键
                    this.showShortcuts();
                    break;
                }
                default: {
                    break;
                }
            }
        },
        showShortcuts () {//快捷键列表
            
        }
    }
}
</script>
<style lang="scss" scoped>
.chat {
    position: relative;
    width: 100%;
    height: 100%;
    padding-bottom: 165px;
    margin-left: 4px;
}
.chat-list {
    height: 100%;
    color: $c_3;
    position: relative;
    padding-top: 28px;

    .chat-resource {
        width: 100%;
        height: 28px;
        background-color: $c_14;
        position: absolute;
        top: 0;
        left: 0;

        p {
            height: 100%;
            line-height: 28px;
            margin-left: 6px;

            .re-content {
                padding-left: 6px;
                color: $c_17;
                display: inline-block;
                min-width: 100px;
                text-decoration: underline;
            }
            &.chat-page {
                cursor: pointer;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        }
    }

    .chat-box {
        padding: 10px;
        height: 100%;
        overflow-y: auto;
        overflow-x: hidden;
    }
}
.chat-input {
    position: absolute;
    bottom: 0;
    height: 165px;
    width: 100%;

    .spacebar {
        position: relative;
        border: solid 1px $c_12;
        background-color: $c_1;

        .bar {
            position: absolute;
        }
    }

    .space-bar-top-bottom {
        cursor: row-resize;
        height: 4px;
        width: 100%;
    }
}
</style>

